<template>
  <div class="wrapper">
    <div class="header">
      <mt-header title="银行卡">
        <router-link to="/user" slot="left">
          <mt-button icon="back">我的</mt-button>
        </router-link>
        <!-- <mt-button icon="more" slot="right"></mt-button> -->
      </mt-header>
    </div>

    <div style="padding: 20px;">
        <p class="red">每人最多绑定一张银行卡和一个USDT提现地址，如需更换请联系客服</p>
    </div>

    <div class="box page-part">
      <div class="box-contain clearfix">
        <div v-if="cardInfo.length<=0" class="empty text-center">
          暂未绑定
        </div>
        <div v-if="cardInfo.length>0" class="back-info">
          <ul>
            <li class="clearfix" v-for="i in cardInfo" :key="i.key">
              <div class="col-xs-3">
                <img v-if="i.bankName == 'usdt'" src="../../../static/img/usdt.png" alt="pay">
                <img v-else src="../../../static/img/pay.png" alt="pay">
              </div>
              <div class="col-xs-6">
                <p>{{i.bankName||''}}-{{i.bankAddress||''}}</p>
                <p>{{i.bankNo||''}}</p>
              </div>
              <div class="col-xs-3">
                <span class="text-center btnok red" @click="addCard('edit',i)">修改</span>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div v-if="cardInfo.length <= 1" class="btnbox">
      <span class="text-center btnok" @click="addCard">添加</span>
    </div>
  </div>
</template>

<script>
import * as api from '@/axios/api'
import { Toast } from 'mint-ui'

export default {
  components: {},
  props: {},
  data () {
    return {
      cardInfo: []
    }
  },
  watch: {},
  computed: {},
  created () {

  },
  mounted () {
    this.cardInfo = []
    this.getCardDetail()
    this.getUsdtInfo()
  },
  methods: {
    // 添加银行卡
    addCard (val,i) {
       if (i){
          this.$store.state.bankInfo = i
       }

      if (val === 'edit') {
        this.$router.push({
          path: '/addCard',
          query: {
            type: val
          }
        })
      } else {
        this.$router.push('/addCard')
      }
    },

    async getCardDetail () {
      // 获取银行卡信息
      let opts = {
        code: this.$route.query.code
      }
      let data = await api.getBankCard(opts)
      if (data.status === 0) {
        this.cardInfo.push(data.data)
      }
    },

    async getUsdtInfo () {
      // 获取银行卡信息
      let opts = {
        code: this.$route.query.code
      }
      let data = await api.getUsdtInfo(opts)
      if (data.status === 0) {
        this.cardInfo.push(data.data)
      }
    }
  }
}
</script>
<style lang="less" scoped>
  .back-info {
    padding: 0.2rem 0.3rem;

    .name {
      font-size: 0.3rem;
      padding: 0.1rem 0rem;
    }

    ul {
      li {
        // border:0.01rem solid #ddd;
        padding: 0.2rem;

        img {
          width: 0.84rem;
          margin-top: 0.1rem;
        }

        div {
          line-height: 0.35rem;
        }
      }
    }
  }

  .transaction {
    color: rgba(100, 100, 100, 0.78);

    .empty {
      width: 100%;
      font-size: 0.43rem;
      color: #888888;
      text-align: center;
      line-height: 2rem;
    }
  }

  .btnbox {
    width: 30%;
    margin: 0 auto;
  }
</style>
